<template>
  <div class="relative retrieve-screen" >
    <div class="pointer" @click="show()" :class="{relativeHover: visible && hover}">
      <div class="retrieve-screen-left" v-if="leftBorder"></div>
      <span v-if="tip">{{tip}}</span>
      <i class="iconfont" :class="`icon-${icon}`" :style="{fontSize: fontSize}"></i>
    </div>
    <div
      @mouseleave="mouseleave"
      class="relative-com absolute"
      v-show="visible"
      :style="{top: `${top}px`, left: `${left}px`, height: `${height}px`}">

      <p style="padding: 5px 0" v-if="title">{{title}}</p>
      <div v-if="stage" class="t-left relative-stage">
        <zz-select
          :option="stageIdList"
          :options="{width: '300px'}"
          @optionClick="switchStageId"
          background="none"
          :name = "`${selectName}`"
          optionBackground="rgba(10, 57, 79, 0.9)"
        ></zz-select>
        <!--<span v-for="(item,index) in stageIdList" @click="switchStageId(item,index)" :class="{hover: index === stageIdShow}">{{item.stageName}}</span>-->
      </div>
      <zz-search
        v-if="search"
        background="rgba(12, 69, 95, 0.8)"
        :width="320"
        :height="35"
        :searchTop="4"
        @searchClick="searchClick"
        borderColor="#136387"></zz-search>
      <div class="retrieve-area">
        <div class="area-top clear">
          <div :class="{hover: type === 1 && !filter}" @click="choose(1)">区域/城市公司</div>
          <div :class="{hover: type === 2 && !filter}" @click="choose(2)">项目</div>
        </div>
        <div class="clear area-com">
          <div class="left area" :style="{width: type === 1 ? '100%' : '50%'}" v-bar>
            <div>
              <p class="area-line" :class="{'area-hover': adminHover}" v-if="currentUser.advancedAdmin && showAdmin && this.$local.get('login') === 'login' || currentUser.companyRoleRang === 5 " @click="nodeClick(null)">集团总部</p>
              <div v-for="item in enterprisePassCheck" class="clear" :class="{adminPadding: currentUser.advancedAdmin && showAdmin}">
                <p
                  class="left area-line"
                  :title="item.departmentName"
                  :class="{'area-hover': item.hover, 'area-width': showCheckbox}"
                  @click="nodeClick(item)">{{item.departmentName}}</p>
                <div v-if="showCheckbox" class="right area-check" :class="{'area-check-hover': item.showCheck}" @click="nodeCheckAreaClick(item)">
                  <img v-show="item.showCheck" src="/static/images/tree.png">
                </div>
              </div>
            </div>
          </div>
          <div v-show="type === 2" class="left area-project" style="width: 50%" v-bar>
            <div>
              <div v-for="item in projectPassCheck">
                <p
                  class="left area-line"
                  :title="item.projectTitle"
                  :class="{'area-hover': item.hover, 'area-width': showCheckbox}"
                  @click="nodeProjectClick(item)">{{item.projectTitle}}</p>
                <div v-if="showCheckbox" class="right area-check" :class="{'area-check-hover': item.showCheck}" @click="nodeCheckProjectClick(item)">
                  <img v-show="item.showCheck" src="/static/images/tree.png">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear mt15" v-if="bottom">
        <button class="left relative-all" @click="allArea(false)" v-if="allAreaStatus">全部区域</button>
        <button class="left relative-all" @click="allArea(true)" v-else>取消全部区域</button>
        <button class="right relative-que"  @click="confirm">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'zz-retrieve',
    data () {
      return {
        visible: false,
        adminHover: false,
        type: 1,
        allAreaStatus: true,
        enterprisePassCheck: [],
        departmentIds: new Set(),
        projectIds: new Set(),
        projectPassCheck: [],
        node: '',
        stageIdList: {},
        stageIdShow: 0,
        projectName: '',
        selectName: '',
        dateTime: ''
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    props: {
      tip: {
        type: String,
        default: ''
      },
      search: {
        type: Boolean,
        default: true
      },
      icon: {
        type: String,
        default: 'qiehuan1'
      },
      title: {
        type: String,
        default: ''
      },
      stage: {
        type: Boolean,
        default: false
      },
      fontSize: {
        type: String,
        default: '14px'
      },
      top: {
        type: Number,
        default: 38
      },
      left: {
        type: Number,
        default: -203
      },
      leftBorder: {
        type: Boolean,
        default: false
      },
      height: {
        type: Number,
        default: 362
      },
      hover: {
        type: Boolean,
        default: false
      },
      filter: {
        type: Boolean,
        default: false
      },
      bottom: {
        type: Boolean,
        default: false
      },
      showAdmin: {
        type: Boolean,
        default: true
      },
      showCheckbox: {
        type: Boolean,
        default: false
      },
      // 是否只显示项目
      isProject: {
        type: Boolean,
        default: false
      },
      isAi: [String, Number],
      departmentIdsProps: {
        type: Array,
        default: function () {
          return []
        }
      },
      isStopClick: {
        type: Boolean,
        default: false
      },
      projectIdsProps: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 入口是视频监控
      isMonitor: {
        type: Boolean,
        default: false
      },
      // 登陆入口是Login为false ,登陆入口为projectLogin为true
      isVideoRouter: {
        type: Boolean,
        default: false
      },
      // 入口是否是企业大屏
      isCompanyRouter: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      switchStageId (item) {
        this.selectName = item.value
        this.$store.commit('editCurrentUser', {stageId: item.key.data.stageId})
      },
      getStageIdList (projectId) {
        return new Promise(resolve => {
          let data = {
            projectId: projectId || this.currentUser.pjId
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/screen/getCurrentStageList`,
            data: this.$qs.stringify(data)
          }).then(res => {
            if (res.data.success) {
              let _data = []
              if (res.data.data.length === 0) {
                this.selectName = '暂无分期项目'
                this.stageIdList = []
                return
              }
              res.data.data.forEach((item, index) => {
                if (projectId) {
                  if (index === 0) {
                    this.selectName = item.stageName
                    resolve(item)
                  }
                } else {
                  if (this.currentUser.stageId === item.stageId) {
                    this.selectName = item.stageName
                  }
                }
                _data.push({value: item.stageName, data: item})
              })
              this.stageIdList = _data
            } else {
              this.$message.error(res.data.errorMessage)
            }
          })
        })
      },
      searchClick (value) {
        if (this.type === 1) {
          if (this.isVideoRouter) {
            this.getAreaList(value)
          } else {
            this.getEnterprisePassCheck(value)
          }
        } else if (this.type === 2) {
          this.projectName = value
          if (this.isVideoRouter) {
            this.getProjectsAdmin(this.node, value)
          } else {
            this.findProjectList(this.node, value, 1)
          }
        }
      },
      show () {
        this.visible = !this.visible
        this.$emit('show')
        let _data = {
          'query.fun_code': 'c_ScreenBoard_browse',
          'query.company_id': this.currentUser.coId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.companyServer}/front/hasFunction.htm`,
          data: this.$qs.stringify(_data)
        }).then(res => {
          if (this.visible) {
            if (this.filter) {
              this.departmentIds = new Set(this.departmentIdsProps)
              this.projectIds = new Set(this.projectIdsProps)
              this.type = 2
            }
            if (!this.currentUser.admin || this.isProject || this.isCompanyRouter) {
              this.type = 2
            }
            if (this.isVideoRouter) {
              if (this.currentUser.companyAdmin) {
                this.getAreaList()
              } else {
                this.getProjectsAdmin()
              }
              if (this.stage) {
                this.getStageIdList()
              }
            } else {
              this.getEnterprisePassCheck()
            }
          }
        })
      },
      // 进入项目大屏获取区域列表
      getAreaList (departmentName) {
        let data = {
          coId: this.currentUser.coId,
          mid: this.currentUser.mid
        }
        if (departmentName) {
          data = {...data, ...{'depName': departmentName}}
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/companyScreen/getAreaList`,
          data: this.$qs.stringify(data)
        }).then(res => {
          console.log(res)
          this.enterprisePassCheck = res.data.data.map((item) => {
            item.hover = false
            if (this.showCheckbox) {
              if (this.allAreaStatus) {
                item.showCheck = this.departmentIdsProps.includes(item.departmentId) || this.departmentIds.has(item.departmentId)
              } else {
                item.showCheck = true
              }
            }
            return item
          })
          if (this.currentUser.companyRoleRang === 5) {
            this.adminHover = true
            this.getProjectsAdmin()
          } else {
            this.node = this.enterprisePassCheck[0]
            this.getProjectsAdmin(this.enterprisePassCheck[0])
          }
        })
      },
      mouseleave () {
        this.departmentIds.clear()
        this.projectIds.clear()
        this.enterprisePassCheck = this.enterprisePassCheck.map((item) => {
          item.showCheck = false
          return item
        })
        this.projectPassCheck = this.projectPassCheck.map((item) => {
          item.showCheck = false
          return item
        })
        this.visible = false
      },
      getDepartmentList (departmentName) {
        const data = {
          'departmentName': departmentName
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/screen/getDepartmentList`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.enterprisePassCheck = res.data.data.map((item) => {
            item.hover = false
            if (this.showCheckbox) {
              if (this.allAreaStatus) {
                item.showCheck = this.departmentIdsProps.includes(item.departmentId) || this.departmentIds.has(item.departmentId)
              } else {
                item.showCheck = true
              }
            }
            return item
          })
          if (this.currentUser.admin) {
            this.adminHover = true
            this.getProjectList()
          } else {
            this.node = this.enterprisePassCheck[0]
            this.getProjectList(this.enterprisePassCheck[0])
          }
        })
      },
      // 视频监控方法
      getEnterprisePassCheck (departmentName) {
        const data = {
          'mid': this.currentUser.mid,
          'coId': this.currentUser.coId,
          'departmentName': departmentName
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getEnterprisePassCheckByOnlineVideos`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.enterprisePassCheck = res.data.data.map((item) => {
            item.hover = false
            if (this.showCheckbox) {
              if (this.allAreaStatus) {
                item.showCheck = this.departmentIdsProps.includes(item.departmentId) || this.departmentIds.has(item.departmentId)
              } else {
                item.showCheck = true
              }
            }
            return item
          })
          if (this.filter || !this.currentUser.admin || this.isProject) {
            this.node = this.enterprisePassCheck[0]
            if (this.isVideoRouter) {
              this.getProjectList(this.enterprisePassCheck[0])
            } else {
              if (this.currentUser.admin) {
                this.node = null
                this.findProjectList()
              } else {
                this.findProjectList(this.enterprisePassCheck[0])
              }
            }
          }
        })
      },
      getOnlineVideosByTopOrg () {
        const data = {
          'departmentId': '',
          'isAi': this.isAi,
          'coid': this.currentUser.coId
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getOnlineVideosByTopOrg`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.projectPassCheck = res.data.data.map((item) => {
            item.hover = false
            if (this.showCheckbox) {
              if (this.allAreaStatus) {
                item.showCheck = this.projectIdsProps.includes(item.projectId) || this.projectIds.has(item.projectId)
              } else {
                item.showCheck = true
              }
            }
            return item
          })
        })
      },
      // 获取能查看的项目
      getProjectsAdmin (node, projectTitle) {
        let code = ''
        this.adminHover = false
        this.enterprisePassCheck.map((item) => {
          item.hover = false
          return item
        })
        if (node) {
          node.hover = true
          code = node.code
        } else {
          this.adminHover = true
          code = ''
        }
        let data = {
          'mid': this.currentUser.mid,
          'coId': this.currentUser.coId,
          'code': code,
          isLogin: '1'
        }
        if (projectTitle) {
          data = {...data, ...{'projectTitle': projectTitle}}
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/companyScreen/getProjects`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.projectPassCheck = res.data.data.map((item) => {
            item.hover = false
            if (this.showCheckbox) {
              if (this.allAreaStatus) {
                item.showCheck = this.projectIdsProps.includes(item.projectId) || this.projectIds.has(item.projectId) || node.showCheck
              } else {
                item.showCheck = true
              }
            }
            return item
          })
        })
      },
      getProjectList (node) {
        let departmentId = ''
        this.adminHover = false
        this.enterprisePassCheck.map((item) => {
          item.hover = false
          return item
        })
        if (node) {
          node.hover = true
          departmentId = node.departmentId
        } else {
          this.adminHover = true
          departmentId = this.currentUser.departmentId
          if (this.currentUser.advancedAdmin) {
            departmentId = undefined
          }
        }
        const data = {
          'mid': this.currentUser.mid,
          'coId': this.currentUser.coId,
          'departmentId': departmentId,
          'projectName': this.projectName
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/screen/getProjectList`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.projectPassCheck = res.data.data.map((item) => {
            item.hover = false
            if (this.showCheckbox) {
              if (this.allAreaStatus) {
                item.showCheck = this.projectIdsProps.includes(item.projectId) || this.projectIds.has(item.projectId) || node.showCheck
              } else {
                item.showCheck = true
              }
            }
            return item
          })
        })
      },
      // 获取项目
      findProjectList (node, projectName, allProject) {
        let departmentId = ''
        this.adminHover = false
        this.enterprisePassCheck.map((item) => {
          item.hover = false
          return item
        })
        if (node) {
          node.hover = true
          departmentId = node.departmentId
        } else {
          this.adminHover = true
          departmentId = this.currentUser.departmentId
          if (this.currentUser.advancedAdmin) {
            departmentId = ''
          }
        }
        const data = {
          'mid': this.currentUser.mid,
          'coId': this.currentUser.coId,
          'isAi': this.isAi,
          'departmentId': departmentId,
          'projectName': projectName
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getProjectPassCheckByOnlineVideos`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.projectPassCheck = res.data.data.map((item) => {
            item.hover = false
            if (this.showCheckbox) {
              if (this.allAreaStatus) {
                item.showCheck = this.projectIdsProps.includes(item.projectId) || this.projectIds.has(item.projectId) || node.showCheck
              } else {
                item.showCheck = true
              }
            }
            return item
          })
        })
      },
      choose (type) {
        if (!this.currentUser.companyAdmin && this.isVideoRouter) {
          if (type === 1) {
            this.$message.error('权限不够')
            return
          }
        }
        if (!this.filter && this.currentUser.admin && !this.isProject || this.isVideoRouter) {
          this.enterprisePassCheck.map((item) => {
            item.hover = false
            return item
          })
          this.type = type
          if (type === 2) {
            this.adminHover = true
            if (this.$local.get('login') === 'login') {
              if (this.currentUser.advancedAdmin) {
                this.getOnlineVideosByTopOrg()
              } else {
                this.findProjectList()
              }
            } else {
              this.getProjectsAdmin()
            }
          }
        }
      },
      // 点击区域切换
      nodeClick (node) {
        if (this.type === 1) {
          this.chooseArea(node)
        } else {
          if (!node) {
            this.enterprisePassCheck.forEach(item => {
              item.hover = false
            })
            this.adminHover = true
            if (this.isVideoRouter) {
              this.getProjectsAdmin(node)
            } else {
              this.getOnlineVideosByTopOrg()
            }
            this.node = null
          } else {
            this.node = node
            if (this.isVideoRouter) {
              this.getProjectsAdmin(node)
            } else {
              this.findProjectList(node)
            }
          }
        }
      },
      nodeProjectClick (node, AreaVideo) {
        // 是否停止跳转路由事件
        if (this.isStopClick) {
          this.$emit('clickProject', node)
        } else {
          // 如果是项目大屏或者是企业大屏进入
          if (this.isVideoRouter || this.isCompanyRouter || AreaVideo) {
            let currentCookie = JSON.parse(this.$getCookie('currentUser'))
            this.getStageIdList(node.projectId).then((Stage) => {
              currentCookie.pjId = node.projectId
              currentCookie.pjName = node.projectTitle
              let data = {
                stageId: Stage.stageId
              }
              this.$axios({
                method: 'post',
                url: `${this.$site.videoServer}/api/panorama/getPanoramaUpdateTime`,
                data: this.$qs.stringify(data)
              }).then(res => {
                if (!res.data.data || res.data.data.length === 0) {
                  this.dateTime = '暂无更新时间'
                } else {
                  this.dateTime = res.data.data[0]
                }
                this.$setCookie('currentUser', JSON.stringify(currentCookie), {expires: 14, domain: this.$site.domain, path: '/'})
                this.$store.commit('editCurrentUser', {pjId: node.projectId, dateTime: this.dateTime, stageId: Stage.stageId, pjName: node.projectTitle})
                if (this.isCompanyRouter) {
                  this.$router.push({name: 'projectVideo'})
                }
                if (AreaVideo) {
                  this.$router.push({name: 'screenVideoProject', query: {pjId: node.projectId, name: node.projectTitle, auto: true}})
                }
              })
            })
          } else {
            this.$router.push({name: 'videoProject', query: {pjId: node.projectId, name: node.projectTitle}})
          }
        }
      },
      nodeCheckAreaClick (item) {
        item.showCheck = !item.showCheck
        if (this.projectPassCheck[0]) {
          let departId = this.projectPassCheck[0].departmentId
          if (item.departmentId === departId) {
            this.projectPassCheck = this.projectPassCheck.map((project) => {
              project.showCheck = item.showCheck
              return project
            })
          }
        }
        if (item.showCheck) {
          this.departmentIds.add(item.departmentId)
        } else {
          this.allAreaStatus = true
          this.departmentIds.delete(item.departmentId)
        }
      },
      nodeCheckProjectClick (item) {
        item.showCheck = !item.showCheck
        this.enterprisePassCheck.forEach(enterprise => {
          if (enterprise.departmentId === item.departmentId) {
            enterprise.showCheck = this.projectPassCheck.every((item) => item.showCheck)
            if (enterprise.showCheck) {
              this.departmentIds.add(enterprise.departmentId)
            } else {
              this.departmentIds.delete(enterprise.departmentId)
            }
          }
        })
        if (item.showCheck) {
          this.projectIds.add(item.projectId)
        } else {
          this.allAreaStatus = true
          this.projectIds.delete(item.projectId)
        }
      },
      // 全部区域
      allArea (status) {
        this.allAreaStatus = status
        this.projectPassCheck = this.projectPassCheck.map((item) => {
          item.showCheck = !status
          return item
        })
        this.enterprisePassCheck = this.enterprisePassCheck.map((item) => {
          item.showCheck = !status
          if (item.showCheck) {
            this.departmentIds.add(item.departmentId)
          } else {
            this.departmentIds.delete(item.departmentId)
          }
          return item
        })
      },
      confirm () {
        if (this.allAreaStatus && this.departmentIds.size < 0 && this.projectIds.size < 0) {
          // this.$message.warning('请先选择区域')
          return
        }
        if (!this.allAreaStatus) {
          this.$emit('confirmAll')
        } else {
          this.$emit('confirm', {departmentIds: [...this.departmentIds], projectIds: [...this.projectIds]})
        }
      },
      // 切换区域
      chooseArea (item) {
        if (this.isMonitor && !this.isVideoRouter) {
          if (item === null) {
            this.$router.push({name: 'video', query: {departmentId: '', name: '集团总部'}})
          } else {
            this.$router.push({name: 'video', query: {departmentId: item.departmentId, name: item.departmentName}})
          }
        } else {
          if (item === null) {
            let currentCookie = JSON.parse(this.$getCookie('currentUser'))
            currentCookie.code = ''
            currentCookie.departmentId = ''
            currentCookie.companyTitle = '集团总部'
            this.$setCookie('currentUser', JSON.stringify(currentCookie), {expires: 14, domain: this.$site.domain, path: '/'})
            this.$store.commit('editCurrentUser', {code: '', departmentId: '', companyTitle: '集团总部'})
            this.$router.push({name: 'company'})
          } else {
            let currentCookie = JSON.parse(this.$getCookie('currentUser'))
            currentCookie.code = item.code
            currentCookie.departmentId = item.departmentId
            currentCookie.companyTitle = item.departmentName
            this.$setCookie('currentUser', JSON.stringify(currentCookie), {expires: 14, domain: this.$site.domain, path: '/'})
            this.$store.commit('editCurrentUser', {code: item.code, departmentId: item.departmentId, companyTitle: item.departmentName})
            this.$router.push({name: 'company'})
          }
        }
      }
    }
  }
</script>

<style lang='scss'>
  .pointer {
    &:hover {
      color: #00e5ff;
    }
  }
  .retrieve-screen{
    display: inline-block;
    line-height: 20px;
    .icon-qiehuan{
      cursor: pointer;
    }
    .relativeHover{
      color: $color-screen;
    }
    .relative-com{
      width: 340px;
      z-index: 1000;
      padding: 10px;
      font-size: 14px;
      box-sizing: border-box;
      background: rgba(10, 57, 79, 0.9);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      color: #d6e4f8;
      .relative-stage{
        margin-bottom: 10px;
        >span{
          margin-right: 10px;
          cursor: pointer;
          &:hover{
            color: $color-screen;
          }
          &.hover{
            color: $color-screen;
          }
        }
      }
      .retrieve-area{
        margin-top: 10px;
        height: 265px;
        border: 1px #136387 solid;
        text-align: left;
        .area-top{
          letter-spacing: 0;
          border-bottom: 1px #136387 solid;
          >div{
            float: left;
            width: 50%;
            height: 30px;
            line-height: 30px;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            &:hover{
              color: $color-screen;
            }
            &:last-child{
              border-left: 1px #136387 solid;
            }
          }
          .hover{
            color: $color-screen;
          }
        }
        .area-com{
          padding: 10px 10px 10px 10px;
          height: 235px;
          box-sizing: border-box;
          .area{
            height: 100%;
          }
          .adminPadding{
            padding-left: 10px;
          }
          .area-line{
            line-height: 25px;
            cursor: pointer;
            width: 100%;
            @include ellipsis;
            &:hover{
              color: $color-screen;
            }
          }
          .area-check{
            width: 10px;
            height: 10px;
            margin-top: 9px;
            border: 1px #136387 solid;
            cursor: pointer;
            &:hover{
              border: 1px $color-screen solid;
            }
            >img{
              width: 100%;
              vertical-align: top;
            }
          }
          .area-check-hover{
            border: 1px #27abbd solid;
          }
          .area-hover{
            color: $color-screen;
          }
          .area-width{
            width: 80%;
          }
          .area-project{
            box-sizing: border-box;
            border-left: 1px #136387 solid;
            padding-left: 10px;
            height: 100%;
          }
        }
      }
      .relative-all{
        height: 30px;
        padding: 0 5px;
        color: $color-screen;
        border: 1px #136387 solid;
        background: none;
        cursor: pointer;
        &:hover{
          border: 1px $color-screen solid;
        }
      }
      .relative-que{
        width: 75px;
        height: 30px;
        border: 1px $color-screen solid;
        background: $color-screen;
        cursor: pointer;
        &:hover{
          border: 1px $color-hover solid;
          background: $color-hover;
        }
      }
    }
    .screen-tree {
      .node-selected{
        color: $color-screen;
      };
      .label{
        &:hover{
          color: $color-screen;
        }
      }
    }
  }
  .retrieve-screen-left{
    float: left;
    width: 1px;
    height: 36px;
    margin-right: 15px;
    margin-top: -8px;
    background-image: url("/static/images/line-duan.png");
  }
</style>
